/**
 * Created by YIn on 2017/11/24.
 */
//  仪表盘

var dashboard = echarts.init(document.getElementById('dashboard'));
dashboard_option = {
    // backgroundColor: '',
    tooltip: {
        formatter: "{a} <br/>{c} {b}"
    },
    toolbox: {
        show: false,  // 悬浮菜单是否开启 已关闭
        feature: {
            mark: {show: true},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    series: [
        {
            name: 'CPU',
            type: 'gauge',
            min: 0,
            max: 100,
            center: ['50%', '50%'],
            splitNumber: 10,  // 分割段数
            radius: '95%',
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: [[0.69, 'lime'], [0.89, '#1e90ff'], [1, '#ff4500']],
                    width: 3,
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            axisLabel: {            // 坐标轴小标记
                textStyle: {       // 属性lineStyle控制线条样式
                    fontWeight: 'bolder',
                    color: '#fff',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            axisTick: {            // 坐标轴小标记
                length: 15,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: 'auto',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            splitLine: {           // 分隔线
                length: 25,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                    width: 3,
                    color: '#fff',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            pointer: {           // 分隔线
                shadowColor: '#fff', //默认透明
                shadowBlur: 5
            },
            title: {
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    fontSize: '100%',
                    fontStyle: 'normal',
                    color: '#fff',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            detail: {
                // backgroundColor: 'rgba(30,144,255,0.8)',
                // borderWidth: 1,
                // borderColor: '#fff',
                shadowColor: '#fff', //默认透明
                shadowBlur: 5,
                offsetCenter: [0, '50%'],       // x, y，单位px
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    color: '#fff'
                }
            },
            data: [{value: 0, name: 'CPU'}]
        },
        {
            name: '内存',
            type: 'gauge',
            center: ['25%', '50%'],    // 默认全局居中
            radius: '90%',
            min: 0,
            max: 100,
            endAngle: 55,
            splitNumber: 10,
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: [[0.69, 'lime'], [0.89, '#1e90ff'], [1, '#ff4500']],
                    width: 2,
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            axisLabel: {            // 坐标轴小标记
                textStyle: {       // 属性lineStyle控制线条样式
                    fontWeight: 'bolder',
                    color: '#fff',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            axisTick: {            // 坐标轴小标记
                length: 12,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: 'auto',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            splitLine: {           // 分隔线
                length: 20,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                    width: 3,
                    color: '#fff',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            pointer: {
                width: 5,
                shadowColor: '#fff', //默认透明
                shadowBlur: 5
            },
            title: {
                offsetCenter: [0, '-30%'],       // x, y，单位px
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    fontStyle: 'normal',
                    color: '#fff',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            detail: {
                //backgroundColor: 'rgba(30,144,255,0.8)',
                // borderWidth: 1,
                borderColor: '#fff',
                shadowColor: '#fff', //默认透明
                shadowBlur: 5,
                width: 80,
                height: 30,
                offsetCenter: [-20, '20%'],       // x, y，单位px
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    color: '#fff',
                    fontSize: '150%'
                }
            },
            data: [{value: 0, name: 'Memory'}]
        },
        {
            name: '存储',
            type: 'gauge',
            center: ['75%', '50%'],    // 默认全局居中
            radius: '90%',
            min: 0,
            max: 100,
            startAngle: 125,
            // endAngle: 45,
            splitNumber: 10,
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: [[0.69, 'lime'], [0.89, '#1e90ff'], [1, '#ff4500']],
                    width: 2,
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            axisTick: {            // 坐标轴小标记
                length: 12,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: 'auto',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            axisLabel: {
                textStyle: {       // 属性lineStyle控制线条样式
                    fontWeight: 'bolder',
                    color: '#fff',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10
                }
                // ,
                // formatter: function (v) {
                //     switch (v + '') {
                //         case '0' :
                //             return 'E';
                //         case '1' :
                //             return 'Gas';
                //         case '2' :
                //             return 'F';
                //     }
                // }
            },
            splitLine: {           // 分隔线
                length: 15,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                    width: 3,
                    color: '#fff',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            pointer: {
                width: 2,
                shadowColor: '#fff', //默认透明
                shadowBlur: 5
            },
            title: {
                offsetCenter: [0, '-30%'],       // x, y，单位px
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    fontStyle: 'normal',
                    color: '#fff',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            detail: {
                //backgroundColor: 'rgba(30,144,255,0.8)',
                // borderWidth: 1,
                borderColor: '#fff',
                shadowColor: '#fff', //默认透明
                shadowBlur: 5,
                width: 80,
                height: 30,
                offsetCenter: [20, '20%'],       // x, y，单位px
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    color: '#fff',
                    fontSize: '150%'
                }
            },
            data: [{value: 0, name: 'Storage'}]
        }
    ]
};
dashboard.setOption(dashboard_option);

get_sysinfo();

setInterval(function () {
    get_sysinfo();
}, 1000 * 3);

function get_sysinfo() {
    return $.ajax({
        type: "GET",
        url: '/sys_info/',
        success: function (data) {
            dashboard_option.series[0].data[0].value = data.cpu_percent;
            dashboard_option.series[1].data[0].value = data.mem_percent;
            dashboard_option.series[2].data[0].value = data.disk_percent;
            dashboard.setOption(dashboard_option);
        },
        complete: function (XHR, TS) {
            XHR = null
        }
    });
}
window.addEventListener("resize", function () {
    dashboard.resize();
});


// var ws_get_sysinfo = WebS('/sys_info/');
//
// ws_get_sysinfo.addEventListener('open', function(){
//     console.log('sysinfo 连接成功');
// });
// ws_get_sysinfo.addEventListener('close', function(){
//     console.log('sysinfo 连接关闭');
// });
// ws_get_sysinfo.addEventListener('error', function(evt){
//     console.log('sysinfo error');
// });


